<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib uri="http://richfaces.org/a4j"  prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Contos</title>
        </head>
        <body>
            <h:form>

                <rich:dataList var="u" value="#{UsuarioManagedBean.usuarios}" >
                    <h:outputText value="(#{u.id}) #{u.nome}" />
                </rich:dataList>
                <h:panelGrid columns="2">
                    <h:outputText value="Período:" />
                    <a4j:outputPanel id="calendar" layout="block">
                        <rich:calendar value="#{LancamentoManagedBean.periodo}"
                                       datePattern="yyyyMM"
                                       cellWidth="24px"
                                       cellHeight="22px"
                                       style="width:200px">
                            <a4j:support event="onchanged" reRender="tabelalancamentos"/>
                        </rich:calendar>
                    </a4j:outputPanel>
                </h:panelGrid>
                <br />
                <h:panelGrid columns="4">
                    <h:outputLink value="#" id="link1">
                        <h:outputText value="Adicionar lançamento" />
                        <rich:componentControl for="mp1" attachTo="link1" operation="show" event="onclick"/>
                    </h:outputLink>
                </h:panelGrid>
                <br />

                <rich:dataTable id="tabelalancamentos"
                                var="l"
                                value="#{LancamentoManagedBean.lancamentos}"
                                onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
                    <rich:column>
                        <f:facet name="header"><h:outputText value="ID" /></f:facet>
                        <h:outputText value="#{l.id}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header"><h:outputText value="Descrição" /></f:facet>
                        <h:outputText value="#{l.descricao}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header"><h:outputText value="Valor" /></f:facet>
                        <h:outputText value="1234" ><f:convertNumber pattern="R$ ###0.00" /></h:outputText>
                    </rich:column>
                    <rich:column>
                        <f:facet name="header"><h:outputText value="Período" /></f:facet>
                        <h:outputText value="#{l.periodo}" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header"><h:outputText value="Data" /></f:facet>
                        <h:outputText value="#{l.dataInclusao}" ><f:convertDateTime pattern="dd/MM/yyyy" /></h:outputText>
                    </rich:column>
                    <rich:column>
                        <f:facet name="header"><h:outputText value="Tipo" /></f:facet>
                        <h:outputText value="#{l.tipo}" />
                    </rich:column>
                </rich:dataTable>

                <rich:modalPanel id="mp1" >
                    <f:facet name="header">
                        <h:outputText value="Adicionar lançamento" />
                    </f:facet>
                    <br />
                    <h:outputLink onclick="#{rich:component('mp1')}.hide()" >
                        <h:outputText value="Cancelar" />
                    </h:outputLink>
                </rich:modalPanel>

            </h:form>
        </body>
    </html>
</f:view>
